<template>
  <div class="dropdown-box">
    <a-dropdown v-model:open="visible" placement="bottomLeft">
      <div class="ant-dropdown-link">
        <avic-icon v-if="tabInfo.icon" class="menu-icon" :svg="tabInfo.icon" />
        {{ tabInfo.tabTitle ? t(`${tabInfo.tabTitle}`) : t(`${tabInfo.route.meta.title}`) }}
      </div>
      <template v-if="editablePortlet && portletShowType === 'dropdown'" #overlay>
        <a-menu>
          <a-radio-group v-model:value="radioValue" name="radioGroup" button-style="solid" @change="onChange">
            <a-menu-item class="tabs-drop-item">
              <!-- <ul>
                <li > -->
              <a-radio v-for="(tim, i) in userPortalList" :key="'portletName-' + i" :style="{ display: 'block' }" :value="tim.id">
                <span style="display: flex; align-items: center">
                  <!-- <avic-icon class="check" svg="avic-check-fill" /> -->
                  <avic-icon svg="avic-checkbox-circle-fill" class="check" />
                  <span
                    class="tabs-drop-item-span"
                    :title="tim.portletName"
                    style="overflow: hidden; text-overflow: ellipsis; width: 120px; white-space: nowrap"
                  >
                    {{ tim.portletName }}
                  </span>
                  <avic-icon svg="avic-edit-line" class="setting" @click="handleSetting(tim)" />
                </span>
              </a-radio>
              <!-- <setting-outlined
                    class="setting theme-main-hover-color"

                  /> -->

              <!-- </li>
              </ul> -->
            </a-menu-item>
            <a-menu-item class="drop-item-plus" style="padding: 0">
              <a-button type="link" block @click="handleOpenModal()">
                <avic-icon svg="PlusOutlined" style="margin-right: 4px" />
                添加首页
              </a-button>
            </a-menu-item>
          </a-radio-group>
        </a-menu>
      </template>
    </a-dropdown>
    <a-modal title="添加" :open="modalVisible" @ok="handleOk" @cancel="handleCancel">
      <a-form>
        <a-form-item :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" label="首页名称">
          <a-input v-model:value="portalName" :maxlength="200" placeholder="请输入首页名称" />
        </a-form-item>
      </a-form>
    </a-modal>
    <portal-designer-modal
      v-if="showDesignerModal"
      ref="portalDesignRefName"
      :portal-info="portalInfo"
      @closeModal="handeleCloseDesigner"
      @updatePortalList="updatePortalList"
      @reloadData="reloadData"
    />
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/store/app';
import PortalDesignerModal from '@/components/portal-designer/PortalDesignModal.vue';
import { savePortalInfo, getUserPortal, getPortletContentById } from '@/api/avic/system/PortalApi';
import { settings } from '@/settings';
const appStore = useAppStore();
const { proxy } = getCurrentInstance();
defineProps({
  tabInfo: {
    type: Object,
    default: null
  }
});

const visible = ref(false); // Dropdown 显隐控制
const modalVisible = ref(false); // 添加首页名称弹窗显隐控制
const radioValue = ref();
const userPortalList = ref([]); // 用户首页配置列表
const showDesignerModal = ref(false);
const portalInfo = ref();
const portalName = ref();
const portalDesign = ref();
const editingPortalId = ref();
const editablePortlet = ref(true);
const portletShowType = ref('');

onMounted(() => {
  getPortalList();
  if (typeof settings.editablePortlet !== 'undefined') {
    editablePortlet.value = settings.editablePortlet;
  }
  if (typeof settings.portletShowType !== 'undefined') {
    portletShowType.value = settings.portletShowType || 'tile';
  }
});
const { t } = useI18n();
const portalDesignId = computed(() => appStore.portalDesign);

/** 用户首页配置列表数据初始化和刷新**/
async function getPortalList(tempPortalId = '') {
  const res = await getUserPortal();
  if (res.code === '200') {
    userPortalList.value = res.data;
  }
  // 系统默认
  radioValue.value = userPortalList.value.find((item) => item.isDefault === '1')?.id;
  portalDesign.value = radioValue.value;
  if (tempPortalId) {
    const editedPortal = userPortalList.value.find((item) => item.id === tempPortalId);
    if (editedPortal) {
      radioValue.value = tempPortalId;
      portalDesign.value = tempPortalId;
    }
    appStore.portalDesign = '';
    nextTick(() => {
      appStore.SET_PORTAL_DESIGN(portalDesign.value);
    });
  }
  // 用户首次登陆系统，需要初始化 或者 删除时需要更新
  else if (!portalDesignId.value) {
    appStore.portalDesign = portalDesign.value;
  } else {
    const userConfigPortal = userPortalList.value.find((item) => item.id === portalDesignId.value);
    if (userConfigPortal) {
      radioValue.value = userConfigPortal.id;
    } else {
      appStore.portalDesign = radioValue.value;
    }
  }
}

/** 点击radio设置默认状态**/
function onChange(e) {
  const { value } = e.target;
  radioValue.value = value;
  // 保存个性化配置数据
  portalDesign.value = radioValue.value;
  appStore.SET_PORTAL_DESIGN(portalDesign.value);
}

/** 点击设置打开首页布局设置弹窗 **/
function handleSetting(record) {
  visible.value = false; // 隐藏下拉菜单
  modalVisible.value = false;
  if (typeof record.resourceType === 'undefined' || (Number(record.resourceType) !== 0 && Number(record.resourceType) !== 1)) {
    editingPortalId.value = record.id;
  }
  getPortletContentByIds(record);
}

/** 根据portlet id 获取content内容**/
function getPortletContentByIds(record) {
  if (!record.id) return;
  getPortletContentById(record.id).then((res) => {
    if (res.data) {
      const result = {
        ...res,
        content: JSON.parse(res.data.content),
        ...record
      };
      portalInfo.value = result;
      showDesignerModal.value = true;
    }
  });
}

/** 打开添加弹窗**/
function handleOpenModal() {
  visible.value = false;
  portalName.value = ''; // 清空添加弹窗表单
  modalVisible.value = true;
}

/** 请求接口保存首页名称 **/
function handleOk() {
  if (portalName.value) {
    modalVisible.value = false;
    savePortalInfo({ portletName: portalName.value }).then((res) => {
      if (res.data) {
        modalVisible.value = false;
        const result = {
          id: res.data,
          portletName: portalName.value,
          content: null
        };
        editingPortalId.value = res.data;
        portalInfo.value = result;
        showDesignerModal.value = true;
        getPortalList(); // 保存成功更新列表
        handleSetting(result);
        proxy.$message.success('保存成功');
      }
    });
  }
}

/** 首页弹窗添加取消操作 **/
function handleCancel() {
  modalVisible.value = false;
}

function handeleCloseDesigner() {
  showDesignerModal.value = false;
  editingPortalId.value = '';
}

/** 删除操作更新tabsDropRefName列表 */
function updatePortalList() {
  const tempPortalId = editingPortalId.value;
  getPortalList(tempPortalId);
}
/** 重新加载数据 */
function reloadData() {
  const tempPortalId = editingPortalId.value;
  getPortalList(tempPortalId);
}
</script>

<style lang="less" scoped>
.dropdown-box {
  .ant-dropdown-link {
    padding: 0 16px;
  }
}
.ant-tabs-dropdown-menu {
  :deep(.ant-tabs-dropdown-menu-item > span) {
    span {
      flex: 1 0 0;
      display: inline-flex;
      justify-content: space-between;
    }
  }
  .dropdown-box {
    .ant-dropdown-link {
      padding: 0;
    }
  }
}
:deep(.ant-dropdown-menu-item.tabs-drop-item) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 320px;
  padding: 0;
  overflow: auto;
  &:hover {
    background: transparent;
  }
  span.ant-radio + * {
    padding: 0;
  }
}
:deep(.ant-radio-wrapper) {
  width: 180px;
  margin: 0 4px;
  padding: 4px 8px;
  border-radius: 4px;
  .check {
    margin-right: 4px;
    color: #fff;
    font-size: 1.2em;
    .svg-icon {
      vertical-align: -0.125em;
    }
  }
  .setting {
    margin: 0 4px 0 auto;
    color: #fff;

    .svg-icon {
      vertical-align: -0.125em;
    }
  }
  &:hover {
    background: @label-background;
    .check {
      color: @label-background;
    }
    .setting {
      color: @text-color-secondary;
    }
  }
  .ant-radio {
    display: none;
  }
  &::after {
    display: none;
    height: 0;
  }
}
.ant-radio-wrapper-checked {
  color: @primary-color;
  background: @primary-1;

  .check,
  .setting {
    color: @primary-color;
  }
  &:hover {
    background: @primary-1;
    .check {
      color: @primary-color;
    }
    .setting {
      color: @primary-color;
    }
  }
}
// .drop-item-plus {
//   padding: 4px 10px;
//   text-align: center;
//   // background-color: #fbfbfb;
//   color: @primary-color;
//   cursor: pointer;
// }
// .drop-item-plus-content {
//   display: flex;
//   flex-direction: row;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
// }

// .drop-item-plus i {
//   margin-right: 8px;
// }

/*  首页设置配置 by mzy 2020-0528 end */
</style>
